// 需求：
    // a. 创建游戏的地图
    // b. 创建蛇
    // c. 创建食物
    // d. 处理蛇的移动
    // e. 键盘事件控制蛇的方向
    // f.  蛇和食物碰撞检测
    // g. 记录分数
    // h. 添加开始和暂停等控件

// 面向对象：
    // 添加属性
    // 添加方法

// 编码：
// 1. 构造函数
var Snake = function(){
    // 添加属性
    this.mapElement = document.querySelector(".tt-map");
    this.btnStart = document.querySelector(".btn-start");
    this.btnPause = document.querySelector(".btn-pause");
    this.scoreElement = document.querySelector(".score span");
    // 记录行数
    this.row = 20;
    // 记录列数
    this.col = 20;
    // 记录列的间距
    this.space = 30;
    // 记录所有li标签的数组（大数组）
    this.elements = [];
    // 记录代表蛇标签的数组
    this.snakeArray = [];
    // 记录食物的坐标
    this.foodX = 0;
    this.foodY = 0;
    // 记录蛇的移动方向(right,left,top,bottom)
    this.direction = "right";
    // 记录蛇的坐标位置
    this.x = 2;
    this.y = 0;
    // console.log(this);
}
// 2. 原型对象
// 添加方法
// Snake.prototype.foo1 = function(){ }
// 添加方法 创建地图
Snake.prototype.createMap = function(){
    // 判断行和列的数量以及列间距
    // this.row = this.row > 20 ? 20 : this.row;
    // this.col = this.col > 20 ? 20 : this.col;
    // this.space = this.space > 30 ? 30 : this.space;
    // 外部循环
    for(var i = 0 ; i < this.row ; i ++){
        // 创建ul标签
        var ul = document.createElement("ul");
        // 设置ul标签的高度
        ul.style["height"] = this.space +"px";
        // 创建小数组
        var arr = [];
        // 内循环
        for(var j = 0 ; j < this.col ; j ++){
            // 创建li标签
            var li = document.createElement("li");
            // 设置li标签的尺寸
            li.style["width"] = this.space +"px";
            li.style["height"] = this.space +"px";
            // 用小数组记录当前行的所有li标签
            arr.push(li);
            // 往ul标签添加li标签
            ul.appendChild(li);
        }
        // 把小数组添加到大数组中
        // console.log(arr);
        this.elements.push(arr);
        // console.log(this.elements);
        // 往地图容器添加ul标签
        this.mapElement.appendChild(ul);
    }
    // console.log(this.elements);
}
// 添加方法 创建蛇
Snake.prototype.createSnake = function(){
    // 设置第一行的前3个li标签代表蛇
    for(var i = 0 ; i < 3 ; i ++){
        // 设置蛇的类名
        this.elements[0][i].className="snake";
        // 把当前li标签添加到蛇数组中
        this.snakeArray.push(this.elements[0][i]);
    }
}
// 添加方法 产生指定范围的随机数
Snake.prototype.myRandom = function(min,max){
    // 指定范围的随机数
    return Math.floor(Math.random()*(max-min)+min);
}
// 添加方法 创建食物
Snake.prototype.createFood = function(){
    // 随机食物坐标
    this.foodX = this.myRandom(0, this.col);
    this.foodY= this.myRandom(0, this.row);
    // 判断食物是否在蛇身体上
    // 第几行第几列
    if(this.elements[this.foodY][this.foodX].className == "snake"){
        // 重新创建食物
        this.createFood();
    }else {
        // 否则 正常创建食物
        this.elements[this.foodY][this.foodX].className = "food";
    }
}
// 添加方法 蛇的移动的逻辑
Snake.prototype.snakeMove = function(){
    // 根据蛇移动的方向
    if(this.direction == "right"){
        this.x +=1;
    }
    if(this.direction == "left"){
        this.x -=1;
    }
    if(this.direction == "bottom"){
        this.y +=1;
    }
    if(this.direction == "top"){
        this.x -=1;
    }
    // 判断蛇与食物的碰撞
    if(this.x == this.foodX && this.y == this.foodY){
        // 碰撞...


    }else {
        // 没碰撞
        this.snakeArray[0].className="";
        this.snakeArray.shift();
        this.elements[this.y][this.x].className ="snake";
        this.snakeArray.push(this.elements[this.y][this.x]);
    }
    // 设置蛇的移动
    // this.elements[this.y][this.x].className = "snake";

}
// 添加方法 绑定事件
Snake.prototype.addEvent = function(){
    // 记录函数作用域的this
    var _this = this;
    // 点击开始按钮
    this.btnStart.onclick = function(){
        // 测试 蛇移动的逻辑
        _this.snakeMove();
    }

}

// 添加方法 初始化
Snake.prototype.init = function(){
    // 调用创建地图的方法
    this.createMap();
    // 调用创建蛇的方法
    this.createSnake();
    // 调用创建食物的方法
    this.createFood();
    // 调用绑定事件的方法
    this.addEvent();
}

